<script setup lang="ts">
import { computed, ref } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useAppStore } from "@/stores/app"
import { useAuthStore } from "@/stores/auth"
import { MOBILE_ADMIN_MENU_ITEMS, MOBILE_PARTNER_MENU_ITEMS } from "@/constants/MENU_ITEMS"
import { ElMessage, ElMessageBox } from "element-plus"
import { Operation, Sunny, Moon, UserFilled, SwitchButton } from "@element-plus/icons-vue"

const router = useRouter()
const route = useRoute()
const appStore = useAppStore()
const authStore = useAuthStore()

const showPageSelector = ref(false)

// 根据用户角色返回对应的菜单
const menuGroups = computed(() => {
  return authStore.isPartner ? MOBILE_PARTNER_MENU_ITEMS : MOBILE_ADMIN_MENU_ITEMS
})

// 当前页面标题
const pageTitle = computed(() => {
  return (route.meta?.title as string) || "관리자 모바일"
})



// 处理页面选择器菜单点击
function handleMenuClick(path: string) {
  router.push(path)
  showPageSelector.value = false
}

// 处理退出登录
async function handleLogout() {
  try {
    await ElMessageBox.confirm("로그아웃 하시겠습니까?", "확인", {
      confirmButtonText: "확인",
      cancelButtonText: "취소",
      type: "warning",
    })

    await authStore.logout()
    ElMessage.success("로그아웃 되었습니다")
    router.push("/login")
  } catch (error) {
    // 用户取消
  }
}

// 切换暗黑模式
function toggleDark() {
  appStore.toggleDark()
}

// 暗黑模式状态
const isDark = computed(() => appStore.dark)
</script>

<template>
  <div class="mobile-container">
    <!-- 移动端头部 -->
    <header class="mobile-header">
      <el-button :icon="Operation" circle size="small" @click="showPageSelector = true" />

      <h1 class="mobile-page-title">{{ pageTitle }}</h1>

      <el-button :icon="isDark ? Sunny : Moon" circle size="small" @click="toggleDark" />
    </header>

    <!-- 主要内容区域 -->
    <main class="mobile-content">
      <router-view />
    </main>

    <!-- 页面选择器弹窗 -->
    <el-dialog v-model="showPageSelector" title="페이지 선택" width="90%" :show-close="false" class="page-selector-dialog">
      <div class="page-selector">
        <!-- 用户信息 -->
        <div class="user-info-section">
          <el-avatar :size="50" :icon="UserFilled" />
          <div class="user-details">
            <div class="user-name">{{ authStore.user.name || "관리자" }}</div>
            <div class="user-role">{{ authStore.isAdmin ? "관리자" : "파트너" }}</div>
          </div>
        </div>

        <!-- 菜单组 -->
        <div v-for="group in menuGroups" :key="group.group" class="menu-group">
          <div class="menu-group-title">{{ group.group }}</div>
          <div class="menu-items">
            <div
              v-for="item in group.items"
              :key="item.path"
              :class="['menu-item', { active: route.path === item.path }]"
              @click="handleMenuClick(item.path)"
            >
              <el-icon class="menu-item-icon">
                <component :is="item.icon" />
              </el-icon>
              <span class="menu-item-label">{{ item.label }}</span>
            </div>
          </div>
        </div>

        <!-- 退出登录 -->
        <div class="logout-section">
          <el-button type="danger" :icon="SwitchButton" @click="handleLogout" style="width: 100%"> 로그아웃 </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
.mobile-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--el-bg-color-page);
}

.mobile-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--el-bg-color);
  border-bottom: 1px solid var(--el-border-color-lighter);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  z-index: 1000;
}

.mobile-page-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin: 0;
  flex: 1;
  text-align: center;
}

.mobile-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  padding-top: calc(56px + 16px); /* 顶部栏高度 + 内容边距 */
  -webkit-overflow-scrolling: touch;
}

/* 页面选择器样式 */
.page-selector-dialog :deep(.el-dialog) {
  border-radius: 16px;
  margin-top: 10vh;
}

.page-selector-dialog :deep(.el-dialog__header) {
  padding: 20px 20px 10px;
  text-align: center;
}

.page-selector-dialog :deep(.el-dialog__title) {
  font-size: 18px;
  font-weight: 600;
}

.page-selector {
  padding: 0 20px 20px;
}

.user-info-section {
  display: flex;
  align-items: center;
  padding: 16px;
  background: var(--el-fill-color-lighter);
  border-radius: 12px;
  margin-bottom: 20px;
}

.user-details {
  margin-left: 12px;
}

.user-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin-bottom: 4px;
}

.user-role {
  font-size: 12px;
  color: var(--el-text-color-regular);
  padding: 2px 8px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
  border-radius: 12px;
  display: inline-block;
}

.menu-group {
  margin-bottom: 24px;
}

.menu-group-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--el-text-color-regular);
  margin-bottom: 12px;
  padding-left: 4px;
}

.menu-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 8px;
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.menu-item:hover {
  background: var(--el-fill-color-light);
  border-color: var(--el-color-primary-light-7);
}

.menu-item.active {
  background: var(--el-color-primary-light-9);
  border-color: var(--el-color-primary);
  color: var(--el-color-primary);
}

.menu-item-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.menu-item-label {
  font-size: 12px;
  text-align: center;
  line-height: 1.2;
}

.logout-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--el-border-color-lighter);
}

/* 暗黑模式适配 */
:root.dark .mobile-header {
  background: var(--el-bg-color);
  border-bottom-color: var(--el-border-color);
}

:root.dark .user-info-section {
  background: var(--el-fill-color);
}

:root.dark .menu-item {
  background: var(--el-bg-color);
  border-color: var(--el-border-color);
}

:root.dark .menu-item:hover {
  background: var(--el-fill-color);
}

.mobile-user-info {
  display: flex;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--el-border-color-lighter);
  margin-bottom: 20px;
}

.user-details {
  margin-left: 12px;
}

.user-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.user-role {
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 4px;
}

.menu-group {
  margin-bottom: 24px;
}

.menu-group-title {
  font-size: 12px;
  color: var(--el-text-color-placeholder);
  font-weight: 600;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.menu-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.menu-item:hover {
  background-color: var(--el-fill-color-light);
}

.menu-item.active {
  background-color: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

.menu-item-icon {
  margin-right: 12px;
  font-size: 18px;
}

.menu-item-label {
  font-size: 14px;
}

.mobile-logout {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--el-border-color-lighter);
}
</style>
